<template>
  <div>
    <!-- 按钮 -->
    <el-button style="margin:10px" type="primary" icon="el-icon-refresh-right" circle @click="refreshList"></el-button>

    <!-- <el-button style="margin:10px" @click="allPassUserDetailProcess">一键审核</el-button> -->
    <!--    <el-input placeholder="请输入搜索内容在点击搜索" v-model="searchText" style="width:300px;background-color: #fff;">
      <el-button slot="append" icon="el-icon-search" @click="getAllUserDynamicListByTimeDesc"></el-button>
    </el-input>
    <el-button style="margin:10px" @click="reSetting">重置</el-button> -->
    <!-- 表格
      data 展示数据 —— 数组类型
    -->
    <el-table style="width: 100%;" border :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="id" label="id" width="80" align="center">
      </el-table-column>
      <el-table-column prop="nickName" label="用户昵称" width="100" align="center">
      </el-table-column>
      <!--    <el-table-column prop="content" label="文本" align="center">
      </el-table-column> -->
      <!--      <el-table-column label="头像" align="center">
        <el-image style="width: 40px; height: 40px; " :src="$staticURL+list.headimgurl" >
        </el-image>
      </el-table-column> -->
      <el-table-column label="头像" align="center">
        <template slot-scope="{ row, $index }">
          <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL+row.headimgUrl"
            v-if="row.headimgUrl" :preview-src-list="[$staticURL+row.headimgUrl]">
          </el-image>
        </template>
      </el-table-column>
      <!--      <el-table-column label="背景图" align="center">
        <template slot-scope="{ row, $index }">
          <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL+row.backgroundPic"
            v-if="row.backgroundPic" :preview-src-list="[$staticURL+row.backgroundPic]">
          </el-image>
        </template>
      </el-table-column> -->
      <el-table-column prop="companyName" label="公司名称" align="center">
      </el-table-column>
      <!-- <el-table-column prop="personalProfile" label="个人简介" align="center">
      </el-table-column> -->
      <el-table-column label="工作证明" align="center">
        <template slot-scope="{ row, $index }">
          <el-image v-for="(item,index) in row.album" :key="index" style="width: 40px; height: 40px; margin-right: 5px;"
            :src="$staticURL+item" v-if="item" @click="clickevaluatePicture(row)"
            :preview-src-list="evaluatePictureList">
          </el-image>
        </template>
      </el-table-column>
      <!--   <el-table-column label="视频" align="center">
        <template slot-scope="{ row, $index }">
          <video :src="row.videoUrl" controls="controls" style="width:60px;height:60px;"></video>
        </template>
      </el-table-column> -->
      <el-table-column prop="createTime" label="上传时间" align="center" width="100">
      </el-table-column>
      <el-table-column label="审核结果" align="center" width="100"
        :filters="[{ text: '审核驳回', value: '-1' }, { text: '未审核', value: '0' }, { text: '审核通过', value: '1' }]"
        :filter-method="filterTag" filter-placement="bottom-end">
        <template slot-scope="{ row, $index }">
          <p v-if="row.auditStatus == -1">审核驳回</p>
          <p v-else-if="row.auditStatus == 0">未审核</p>
          <p v-else>审核通过</p>
        </template>
      </el-table-column>
      <el-table-column label="驳回原因" align="center">
        <template slot-scope="{ row, $index }">
          <p v-if="row.auditStatus == -1">{{ row.auditResult }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="{ row, $index }" v-if="row.auditStatus == 0">
          <!-- <el-button type="primary" icon="el-icon-edit" circle></el-button> -->
          <el-popconfirm title="是否通过？" icon="el-icon-info" icon-color="red" @confirm="passUserDetailProcess(row.id)">
            <el-tooltip content="通过" placement="top" slot="reference">
              <el-button type="success" icon="el-icon-check"></el-button>
            </el-tooltip>
          </el-popconfirm>
          <el-popconfirm style="margin-left:10px" title="是否驳回？" icon="el-icon-info" icon-color="red"
            @confirm="rejectUserDetailProcess(row.id)">
            <el-tooltip content="驳回" placement="top" slot="reference">
              <el-button type="danger" icon="el-icon-close"></el-button>
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination style="margin-top:20px;textAlign:center" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import {
    MessageBox,
    Message
  } from 'element-ui'
  export default {
    name: 'AuditWork',
    mounted() {
      //获取列表数据方法
      this.getAllUserDetailProcessByTimeAsc()
    },
    data() {
      return {
        //页码
        pageNumber: 1,
        //每页数量
        pageSize: 10,
        //总条数
        total: 0,
        //列表数据
        list: [],
        ids: [],
        //搜索
        // searchText: '',
        evaluatePictureList: [],
      }
    },
    methods: {
      handleSelectionChange(val) {
        console.log(val)
        this.ids = val.filter(function(item) {
          return item.auditStatus == 0
        }).map((item, index) => {
          return item.id;
        }).join(",");
        console.log(this.ids)

      },
      // 点击评价图片，大图预览多张图片
      clickevaluatePicture(row) {
        var srclist = []
        for (const imgArr of row.album) {
          // 把数据库传来的图片放进数组里
          srclist.push('https://www.yushiai.com.cn/' + imgArr)
        }
        this.evaluatePictureList = srclist // 赋值
        // console.log(this.evaluatePictureList)
      },
      refreshList() {
        this.getAllUserDetailProcessByTimeAsc()
      },
      async getAllUserDetailProcessByTimeAsc() {
        let res = await this.$API.audit.getWorkAuthList({
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          orderBY: ''
        })
        console.log(res)
        this.total = res.data.sumLine;

        const arr = [];
        for (let i = 0; i < res.data.rows.length; i++) {
          arr.push(res.data.rows[i].picUrl.split(","))
          res.data.rows[i].album = arr[i]
        }
        // console.log(arr)
        this.list = res.data.rows;
        console.log('list', this.list)
      },
      // reSetting() {
      //   this.searchText = '';
      //   this.getAllUserDetailProcessByTimeAsc();
      // },
      async allPassUserDetailProcess() {
        if (this.ids == '') {
          Message({
            message: '请选择用户',
            type: 'error',
            duration: 5 * 1000
          })
          return false;
        }
        let res = await this.$API.audit.passUserDetailProcess({
          // userDetailProcessId: id,
          userDetailProcessIds: this.ids,
          auditResult: '审核通过'
        })
        this.getAllUserDetailProcessByTimeAsc()
      },
      async passUserDetailProcess(id) {
        let res = await this.$API.audit.auditWorkAuth({
          id: id,
          auditStatus: 1,
          auditResult: '审核通过'
        })
        this.getAllUserDetailProcessByTimeAsc()
      },
      async rejectUserDetailProcess(id) {
        let auditResult = prompt('驳回原因：');
        if (auditResult != null && auditResult != "") {
          let res = await this.$API.audit.auditWorkAuth({
            id,
            auditStatus: -1,
            auditResult,
          })
          this.getAllUserDetailProcessByTimeAsc()
        }
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.getAllUserDetailProcessByTimeAsc()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNumber = val
        this.getAllUserDetailProcessByTimeAsc()
      },
      filterTag(value, row) {
        console.log(value, row)
        return row.auditStatus == value;
      },
      filterHandler(value, row, column) {
        // const property = column['property'];
        // return row[property] === value;
      }
    }
  }
</script>

<style>

</style>